<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>14.1.2-include 和 exclude</title>
</head>

<body>
    <div id="app">
        <!-- <input value="foo" id="my-input" type="text" value="foo" class="foo" onchange="change()" /> -->
        <!-- // 参考用例 -->
        <KeepAlive :max="2" :cache="cache">
            <component :is="dynamicComp" />
        </KeepAlive>
    </div>
</body>
    <script>
        // 参考用例
        // 自定义实现
        const _cache = new Map()
        const cache = {
            get(key) {
                _cache.get(key)
            },
            set(key, value) {
                _cache.set(key, value)
            },
            delete(key) {
                _cache.delete(key)
            },
            forEach(fn) {
                _cache.forEach(fn)
            }
        }
    </script>
    <script src="https://unpkg.com/@vue/reactivity@3.0.5/dist/reactivity.global.js"></script>
    <script>
        /**
         * 目前 KeepAlive 组件中关于缓存的实现
         * 当缓存不存在的时候，总是会设置新的缓存。这会导致缓存不断增加，极端情况下会占用大量内存
         * - 必须设置一个缓存阈值，当缓存数量超过指定阈值时对缓存进行修剪
         * 
         * 我们应该如何对缓存进行修剪呢？
         * - 需要为缓存设置最大容量，也就是通过 KeepAlive 组件的 max 属性来设
         * - 最新一次访问”的缓存修剪策略的核心在于，需要把当前访问（或渲染）的组件作为最新一次渲染的组件，
         *    并且该组件在缓存修剪过程中始终是安全的，即不会被修剪。
         * 
         * 缓存策略能否改变？甚至允许用户自定义缓存策略？
         * - 在 Vue.js 官方的 RFCs 中已经有相关提议。
         *    该提议允许用户实现自定义的缓存策略，
         *    在用户接口层面，则体现在 KeepAlive 组件新增了cache 接口，允许用户指定缓存实例
         * - 等价于将缓存的管理权限从 KeepAlive 组件转交给用户了
         * 
         * 参考上面例子
         * */ 
    </script>
    

</html>